<template>
  <div class="tabsContainer">
    <div class="tabsSeacher">
      <span class="tabLabel">
      用能企业：
      </span>
      <el-select v-model="value1" size="small" placeholder="请选择用能企业">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span class="tabLabel">
      厂站：
      </span>
      <el-select v-model="value2" size="small" placeholder="请选择厂站名称">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span class="tabLabel">
      时间：
      </span>
      <el-date-picker
        v-model="datePicker"
        size="small"
        type="date"
        placeholder="选择日期"
        format="yyyy 年 MM 月 dd 日"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-button type="primary" size="small" @click="seacher">查询</el-button>
    </div>
    <div class="tabs">
      <div v-for="(item, index) in allData.tabs" :key="index" :class="{'tabs-item-active': activeIndex===index}"  class="tabs-item">
        <span class="tabs-link" @click="activeTab(item,index)">{{item}}</span>
      </div>
    </div>
    <div class="tabsFlex">
      <div class="tabsFlexTop">
        <div class="tabsFlexTopLeft">
          <div id="gaugeChart" style="width: 100%;height: 320px"></div>
        </div>
        <div class="tabsFlexTopRight">
          <div class="tabsTable">
            <div class="tabsTableTile">{{tabsTableData.name + '实时信息'}}</div>
            <div class="tabsTableBody" v-for="(item,inde) in tabsTableData.tabaleData" :key="inde">
              <div class="tabsTableTD">{{item.name}}</div>
              <div class="tabsTableTD tabsTableColor">{{item.val}}</div>
              <div class="tabsTableTD">{{item.unit}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tabsFlexCenter">
        <div id="lineOneChart" style="width: 100%;height: 360px"></div>
      </div>
      <div class="tabsFlexBottom">
        <div id="lineTwoChart" style="width: 100%;height: 360px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { isHoliday } from '../../utils/util'
let echarts = require('echarts/lib/echarts')
// 引入折线图组件
require('echarts/lib/chart/gauge')
require('echarts/lib/component/tooltip')
require('echarts/lib/chart/line')
require('echarts/lib/component/legend')
// eslint-disable-next-line
var me
export default {
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return isHoliday(time)
        }
      },
      activeIndex: 0,
      datePicker: '',
      value1: '',
      value2: '',
      allData: {
        tabs: [],
        time: []
      },
      tabsTableData: {
        name: '',
        economicPercentage: '',
        tabaleData: []
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }]
    }
  },
  created () {
    me = this
    me.KEYS = ['activePower', 'reactivePower', 'loadCurrent', 'activePowerLoss', 'reactivePowerLoss', 'comprehensiveLoss']
    me.data = {
      'transformerInfos': [
        {'name': '#1变压器', 'economicPercentage': '11.88', 'activePower': '111111+kW', 'reactivePower': '77.34+kvar', 'loadCurrent': '23.21+A', 'activePowerLoss': '35.21+kW', 'reactivePowerLoss': '29.23+kvar', 'comprehensiveLoss': '38.133+kW'},
        {'name': '#2变压器', 'economicPercentage': '22.88', 'activePower': '22222+kW', 'reactivePower': '77.34+kvar', 'loadCurrent': '23.21+A', 'activePowerLoss': '35.21+kW', 'reactivePowerLoss': '29.23+kvar', 'comprehensiveLoss': '38.133+kW'}
      ],
      'activeReactivePowers': [
        {'actpower': '333', 'reactpower': '77.34', 'losstotal': '38.133', 'createtime': '01:25', 'actloss': '35.21', 'transformid': '#1变压器'},
        {'actpower': '222', 'reactpower': '774.34', 'losstotal': '318.133', 'createtime': '01:30', 'actloss': '35.21', 'transformid': '#1变压器'},
        {'actpower': '444', 'reactpower': '277.34', 'losstotal': '138.133', 'createtime': '01:35', 'actloss': '135.21', 'transformid': '#1变压器'},
        {'actpower': '123', 'reactpower': '77.34', 'losstotal': '38.133', 'createtime': '01:40', 'actloss': '235.21', 'transformid': '#1变压器'},
        {'actpower': '1244', 'reactpower': '775.34', 'losstotal': '38.133', 'createtime': '01:45', 'actloss': '35.21', 'transformid': '#1变压器'},
        {'actpower': '867', 'reactpower': '179.34', 'losstotal': '39.933', 'createtime': '06:20', 'actloss': '37.21', 'transformid': '#1变压器'},
        {'actpower': '765', 'reactpower': '79.34', 'losstotal': '39.933', 'createtime': '06:25', 'actloss': '37.21', 'transformid': '#1变压器'},
        {'actpower': '146', 'reactpower': '79.34', 'losstotal': '39.933', 'createtime': '06:30', 'actloss': '37.21', 'transformid': '#1变压器'},
        {'actpower': '3678', 'reactpower': '557.34', 'losstotal': '38.133', 'createtime': '08:15', 'actloss': '35.21', 'transformid': '#2变压器'},
        {'actpower': '3454', 'reactpower': '77.34', 'losstotal': '38.133', 'createtime': '08:20', 'actloss': '35.21', 'transformid': '#2变压器'},
        {'actpower': '854', 'reactpower': '77.34', 'losstotal': '238.133', 'createtime': '08:25', 'actloss': '335.21', 'transformid': '#2变压器'},
        {'actpower': '1234', 'reactpower': '77.34', 'losstotal': '38.133', 'createtime': '08:30', 'actloss': '35.21', 'transformid': '#2变压器'},
        {'actpower': '6784', 'reactpower': '677.34', 'losstotal': '38.133', 'createtime': '08:35', 'actloss': '35.21', 'transformid': '#2变压器'},
        {'actpower': '4342', 'reactpower': '77.34', 'losstotal': '538.133', 'createtime': '08:40', 'actloss': '357.21', 'transformid': '#2变压器'},
        {'actpower': '544', 'reactpower': '79.34', 'losstotal': '39.933', 'createtime': '14:55', 'actloss': '37.21', 'transformid': '#2变压器'},
        {'actpower': '5654', 'reactpower': '77.34', 'losstotal': '38.133', 'createtime': '07:25', 'actloss': '35.21', 'transformid': '#2变压器'}
      ]
    }
    me.allData = {
      tabs: [],
      time: []
    }
    me.data.transformerInfos.forEach((item, index) => {
      me.allData.tabs.push(item.name)
      me.allData['table' + index] = {}
      me.allData['table' + index].tabaleData = []
      let {name, economicPercentage, ...tabaleData} = item
      me.allData['table' + index].name = name
      me.allData['table' + index].economicPercentage = economicPercentage
      Object.keys(tabaleData).forEach((name) => {
        // activePower 有功功率
        if (name === me.KEYS[0]) {
          let s = item[me.KEYS[0]].split('+')
          me.allData['table' + index].tabaleData.push({
            name: '有功功率',
            val: s[0],
            unit: s[1]
          })
        }
        // reactivePower 无功功率
        if (name === me.KEYS[1]) {
          let s = item[me.KEYS[1]].split('+')
          me.allData['table' + index].tabaleData.push({
            name: '无功功率',
            val: s[0],
            unit: s[1]
          })
        }
        // loadCurrent 负载电流
        if (name === me.KEYS[2]) {
          let s = item[me.KEYS[2]].split('+')
          me.allData['table' + index].tabaleData.push({
            name: '负载电流',
            val: s[0],
            unit: s[1]
          })
        }
        // activePowerLoss 有功损耗
        if (name === me.KEYS[3]) {
          let s = item[me.KEYS[3]].split('+')
          me.allData['table' + index].tabaleData.push({
            name: '有功损耗',
            val: s[0],
            unit: s[1]
          })
        }
        // reactivePowerLoss 无功损耗
        if (name === me.KEYS[4]) {
          let s = item[me.KEYS[4]].split('+')
          me.allData['table' + index].tabaleData.push({
            name: '无功损耗',
            val: s[0],
            unit: s[1]
          })
        }
        // comprehensiveLoss 综合损耗
        if (name === me.KEYS[5]) {
          let s = item[me.KEYS[5]].split('+')
          me.allData['table' + index].tabaleData.push({
            name: '综合损耗',
            val: s[0],
            unit: s[1]
          })
        }
      })
    })
    me.data.activeReactivePowers.forEach((item) => {
      me.allData.tabs.forEach((it, index) => {
        if (index === 0 && it === item.transformid) {
          me.allData.time.push(item.createtime)
        }
        if (it === item.transformid) {
          if (typeof me.allData['line' + index] === 'undefined') {
            me.allData['line' + index] = {}
            // activePower 有功功率
            me.allData['line' + index].activePower = []
            // reactivePower 无功功率
            me.allData['line' + index].reactivePower = []
            // activePowerLoss 有功损耗
            me.allData['line' + index].activePowerLoss = []
            // comprehensiveLoss 综合损耗
            me.allData['line' + index].comprehensiveLoss = []
          }
          me.allData['line' + index].activePower.push(item.actpower)
          me.allData['line' + index].reactivePower.push(item.reactpower)
          me.allData['line' + index].activePowerLoss.push(item.actloss)
          me.allData['line' + index].comprehensiveLoss.push(item.losstotal)
        }
      })
    })
  },
  mounted () {
    this.tabsTableData = this.allData.table0
    this.drawGauge(this.tabsTableData.economicPercentage)
    this.drawLine('lineOneChart', me.allData.time, me.allData.line0.activePower, me.allData.line0.reactivePower)
    this.drawLine('lineTwoChart', me.allData.time, me.allData.line0.activePowerLoss, me.allData.line0.comprehensiveLoss)
  },
  methods: {
    seacher () {
      let params = {
        entId: this.value1,
        id: this.value2,
        time: this.datePicker
      }
      console.log(params)
    },
    activeTab (item, index) {
      this.activeIndex = index
      this.tabsTableData = this.allData['table' + index]
      console.log(this.allData['table' + index].economicPercentage)
      this.drawGauge(this.allData['table' + index].economicPercentage)
      this.drawLine('lineOneChart', me.allData.time, me.allData['line' + index].activePower, me.allData['line' + index].reactivePower)
      this.drawLine('lineTwoChart', me.allData.time, me.allData['line' + index].activePowerLoss, me.allData['line' + index].comprehensiveLoss)
    },
    // 实现图
    drawGauge (data) {
      // 基于准备好的dom，初始化echarts实例
      let gaugeChart = echarts.init(document.getElementById('gaugeChart'))
      // 绘制折线图
      gaugeChart.setOption({
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        color: ['#5cd4d5', '#ffac38', '#78c651'],
        series: [
          {
            name: '指标',
            type: 'gauge',
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                width: 10
              }
            },
            axisTick: { // 坐标轴小标记
              length: 15, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            splitLine: { // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            detail: {
              formatter: '{value}%',
              fontWeight: 'bolder',
              fontSize: 14,
              width: 100
            },
            data: [{value: data, name: '指标'}]
          }
        ]
      })
    }, // 实现折线图
    drawLine (id, time, activePower, reactivePower) {
      // 基于准备好的dom，初始化echarts实例
      let lineChart = echarts.init(document.getElementById(id))
      // 绘制折线图
      lineChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: 60,
          x2: 60,
          y: 45,
          height: 240
        },
        legend: {
          // right: 140,
          data: [{
            name: '有功功率',
            textStyle: {
              color: '#01af50'
            }
          }, {
            name: '无功功率',
            textStyle: {
              color: '#ffc000'
            }
          }]
        },
        color: ['#ffc000', '#01af50'],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee'
            }
          },
          axisLine: {
            // 轴线
            show: true,
            lineStyle: {
              color: '#483d8b'
            }
          },
          data: time
        },
        yAxis: {
          axisLine: {
            // 轴线
            show: true,
            lineStyle: {
              color: '#408ee6',
              width: 2
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#408ee6'
            }
          },
          splitLine: {
            // 分割线
            show: true,
            lineStyle: {
              color: '#eee'
            }
          }
        },
        series: [
          {
            name: '有功功率',
            type: 'line',
            yAxisIndex: 0,
            smooth: true,
            lineStyle: {
              normal: {
                color: '#ffc000'
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#febd5c'
                }, {
                  offset: 1,
                  color: '#ffc000'
                }])
              }
            },
            data: activePower
            // data: me.chartListData.stepNum
          },
          {
            name: '无功功率',
            type: 'line',
            yAxisIndex: 0,
            smooth: true,
            lineStyle: {
              normal: {
                color: '#01af50'
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(55, 158, 68)'
                }, {
                  offset: 1,
                  color: '#01af50'
                }])
              }
            },
            data: reactivePower
          }
        ]
      })
    }

  }
}
</script>

<style>
  .tabsContainer .tabsSeacher {
    height: 46px;
    line-height: 46px;
    text-align: left;
    border-bottom: 1px solid #ccc;
  }
  .tabsContainer .tabsSeacher .tabLabel {
    padding-left: 8px;
    color: #ccc;
    font-size: 14px;
  }
  .tabsContainer .tabsSeacher .tabLabel:first-child {
    border-left: 2px solid #01b495;
  }
  .tabsContainer .tabs {
    background: #fff;
    display: flex;
    justify-content: center;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
  }
  .tabsContainer .tabs .tabs-item {
    flex: 0 0 120px;
    text-align: center;
    padding-bottom: 5px;
    color: #000;
  }
  .tabsContainer .tabs-item .tabs-link{
    display: inline-block;
    padding: 0 12px;
    height: 36px;
    cursor: pointer;
  }
  .tabsContainer .tabs-item-active.tabs-item .tabs-link{
    color: #01b495;
    border-bottom: 2px solid #01b495;
  }
  .tabsFlex {
    display: flex;
    flex-direction: column;
  }
  .tabsFlex .tabsFlexTop,.tabsFlexCenter,.tabsFlexBottom {
  }
  .tabsFlex .tabsFlexTop {
    display: flex;
  }
  .tabsFlex .tabsFlexTop .tabsFlexTopLeft,.tabsFlexTopRight {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tabsFlex .tabsFlexTopRight .tabsTable {
    border: 1px solid #666
  }
  .tabsFlex .tabsFlexTopRight .tabsTable .tabsTableTile {
    height: 30px;
    line-height: 30px;
    background: #ccc;
  }
  .tabsFlex .tabsFlexTopRight .tabsTable .tabsTableBody {
    display: flex;
  }
  .tabsFlex .tabsFlexTopRight .tabsTable .tabsTableTD {
    flex: 1;
    min-width: 120px;
    height: 30px;
    line-height: 30px;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
  }
  .tabsFlex .tabsFlexTopRight .tabsTable .tabsTableTD:last-child {
    border-right: none;
  }
  .tabsTableColor {
    color: #01b495;
  }
</style>
